<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>送水服务 - 智慧园区</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        body {
            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
            background-color: #f5f5f5;
            height: 100vh;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
        
        .ios-status-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
            z-index: 50;
        }
        
        .ios-status-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .ios-nav-bar {
            height: 44px;
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            display: flex;
            align-items: center;
            padding: 0 16px;
            position: relative;
        }
        
        .ios-nav-bar.dark {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .glass-card {
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(16px);
            -webkit-backdrop-filter: blur(16px);
            border-radius: 20px;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
        }
        
        .glass-card.dark {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .main-content {
            height: calc(100vh - 88px); /* 状态栏 + 导航栏的高度 */
            overflow-y: auto;
            -ms-overflow-style: none;  /* IE and Edge */
            scrollbar-width: none;  /* Firefox */
            padding-bottom: 20px;
        }
        
        .main-content::-webkit-scrollbar {
            display: none;
        }
        
        .service-item {
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }
        
        .service-item.dark {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .status-badge {
            padding: 2px 8px;
            border-radius: 10px;
            font-size: 12px;
            font-weight: 500;
        }
        
        .status-pending {
            background-color: rgba(251, 191, 36, 0.2);
            color: #d97706;
        }
        
        .status-processing {
            background-color: rgba(59, 130, 246, 0.2);
            color: #2563eb;
        }
        
        .status-completed {
            background-color: rgba(34, 197, 94, 0.2);
            color: #16a34a;
        }
        
        .status-cancelled {
            background-color: rgba(239, 68, 68, 0.2);
            color: #dc2626;
        }
        
        .status-pending.dark {
            background-color: rgba(251, 191, 36, 0.1);
            color: #fbbf24;
        }
        
        .status-processing.dark {
            background-color: rgba(59, 130, 246, 0.1);
            color: #3b82f6;
        }
        
        .status-completed.dark {
            background-color: rgba(34, 197, 94, 0.1);
            color: #22c55e;
        }
        
        .status-cancelled.dark {
            background-color: rgba(239, 68, 68, 0.1);
            color: #ef4444;
        }
        
        .ios-button {
            background: linear-gradient(135deg, #0ea5e9, #2563eb);
            border-radius: 12px;
            color: white;
            font-weight: 600;
            padding: 14px;
            border: none;
            transition: all 0.3s ease;
        }
        
        .ios-button:active {
            transform: scale(0.98);
        }
        
        /* 暗色模式样式 */
        .dark-mode .glass-card {
            background: rgba(30, 30, 30, 0.7);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-status-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .ios-nav-bar {
            background-color: rgba(30, 30, 30, 0.9);
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .dark-mode .service-item {
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
    </style>
</head>
<body>
    <div id="app" class="relative h-full">
        <!-- iOS 状态栏 -->
        <div class="ios-status-bar">
            <div class="flex justify-between items-center w-full">
                <div class="text-sm font-medium text-gray-800 dark:text-gray-200">9:41</div>
                <div class="flex space-x-2">
                    <i class="fas fa-signal text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-wifi text-gray-800 dark:text-gray-200"></i>
                    <i class="fas fa-battery-full text-gray-800 dark:text-gray-200"></i>
                </div>
            </div>
        </div>
        
        <!-- iOS 导航栏 -->
        <div class="ios-nav-bar">
            <div class="flex justify-between items-center w-full">
                <div class="flex items-center">
                    <i class="fas fa-chevron-left text-blue-500 dark:text-blue-400 mr-2"></i>
                    <span class="text-gray-800 dark:text-gray-200">返回</span>
                </div>
                <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">送水服务</div>
                <div class="w-16"></div> <!-- 占位，保持标题居中 -->
            </div>
        </div>
        
        <!-- 主内容 -->
        <div class="main-content bg-gray-50 dark:bg-gray-900">
            <!-- 服务介绍 -->
            <div class="px-4 py-4">
                <div class="glass-card p-4 mb-4">
                    <div class="flex items-center">
                        <div class="w-12 h-12 rounded-full bg-blue-100 dark:bg-blue-900/30 flex items-center justify-center mr-4">
                            <i class="fas fa-water text-blue-500 dark:text-blue-400 text-xl"></i>
                        </div>
                        <div>
                            <div class="text-lg font-semibold text-gray-800 dark:text-gray-200">园区送水服务</div>
                            <div class="text-sm text-gray-600 dark:text-gray-400">提供桶装水配送，快速便捷</div>
                        </div>
                    </div>
                    <div class="mt-3 text-xs text-gray-500 dark:text-gray-400 space-y-1">
                        <div class="flex items-start">
                            <i class="fas fa-info-circle mt-0.5 mr-2"></i>
                            <div>服务时间：周一至周日 8:00-18:00</div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-truck mt-0.5 mr-2"></i>
                            <div>配送时间：下单后1-2小时内送达</div>
                        </div>
                        <div class="flex items-start">
                            <i class="fas fa-phone-alt mt-0.5 mr-2"></i>
                            <div>客服电话：400-888-8888</div>
                        </div>
                    </div>
                </div>
                
                <!-- 申请按钮 -->
                <button class="ios-button w-full mb-4">
                    <i class="fas fa-plus mr-2"></i> 申请送水服务
                </button>
                
                <!-- 我的申请记录 -->
                <div class="text-base font-semibold text-gray-800 dark:text-gray-200 mb-3 px-1">我的申请记录</div>
                
                <div class="glass-card overflow-hidden">
                    <!-- 服务记录项 -->
                    <div class="service-item p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">送水服务 #2023070301</div>
                            <div class="status-badge status-processing">处理中</div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <div>农夫山泉 x 2桶</div>
                            <div>¥36.00</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">2023-07-03 10:15</div>
                            <button class="text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full px-3 py-1">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="service-item p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">送水服务 #2023062801</div>
                            <div class="status-badge status-completed">已完成</div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <div>农夫山泉 x 3桶</div>
                            <div>¥54.00</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-28 14:30</div>
                            <button class="text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full px-3 py-1">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="service-item p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">送水服务 #2023062201</div>
                            <div class="status-badge status-completed">已完成</div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <div>农夫山泉 x 2桶</div>
                            <div>¥36.00</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-22 09:45</div>
                            <button class="text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full px-3 py-1">
                                查看详情
                            </button>
                        </div>
                    </div>
                    
                    <div class="service-item p-4">
                        <div class="flex justify-between items-start mb-2">
                            <div class="text-base font-medium text-gray-800 dark:text-gray-200">送水服务 #2023061501</div>
                            <div class="status-badge status-cancelled">已取消</div>
                        </div>
                        <div class="flex justify-between text-sm text-gray-600 dark:text-gray-400 mb-2">
                            <div>农夫山泉 x 1桶</div>
                            <div>¥18.00</div>
                        </div>
                        <div class="flex justify-between items-center">
                            <div class="text-xs text-gray-500 dark:text-gray-400">2023-06-15 16:20</div>
                            <button class="text-xs text-blue-500 dark:text-blue-400 border border-blue-500 dark:border-blue-400 rounded-full px-3 py-1">
                                查看详情
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    
    <script>
        // 检测系统暗色模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-mode');
            document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .service-item, .status-pending, .status-processing, .status-completed, .status-cancelled').forEach(el => {
                el.classList.add('dark');
            });
        }
        
        // 监听系统暗色模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
            if (e.matches) {
                document.body.classList.add('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .service-item, .status-pending, .status-processing, .status-completed, .status-cancelled').forEach(el => {
                    el.classList.add('dark');
                });
            } else {
                document.body.classList.remove('dark-mode');
                document.querySelectorAll('.ios-status-bar, .ios-nav-bar, .glass-card, .service-item, .status-pending, .status-processing, .status-completed, .status-cancelled').forEach(el => {
                    el.classList.remove('dark');
                });
            }
        });
    </script>
</body>
</html> 